<template>
  <div class="test">
    <h1>hello test</h1>
    <qf-form
      width="80px"
      :formConfig="formConfig"
      :formBtns="formBtns"
      @submit="submit2Fn"></qf-form>
    <br />
    <hr />
    <br />
    <h1>原生标签</h1>
    <form action="">
      <p>
        账号:
        <input type="text" placeholder="请输入账号" />
      </p>
      <p>
        密码:
        <input type="password" placeholder="请输入密码" />
      </p>
      <input type="submit" value="登录" />
      <input type="reset" value="重置" />
    </form>
    <br />
    <hr />
    <br />
    <h1>表单UI组件 --基本使用</h1>
    <el-form label-width="60px">
      <!-- el-form-item 每个表单的选项 -->
      <el-form-item label="账号">
        <el-input v-model="formData.uname" clearable=""></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          type="password"
          v-model="formData.pwd"
          clearable=""
          show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitFn">登录</el-button>
        <el-button @click="resetFn">重置</el-button>
      </el-form-item>
    </el-form>
    <br />
    <hr />
    <br />
    <h1>表单UI组件 --重置数据(了解)</h1>
    <el-form :model="formData" ref="form3" label-width="60px">
      <!-- el-form-item 每个表单的选项 -->
      <el-form-item label="账号" prop="uname">
        <el-input v-model="formData.uname" clearable=""></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input
          type="password"
          v-model="formData.pwd"
          clearable=""
          show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitFn">登录</el-button>
        <el-button @click="resetFn">重置</el-button>
      </el-form-item>
    </el-form>

    <br />
    <hr />
    <br />
    <h1>表单UI组件 --表单验证(重点内容)</h1>
    <el-form :model="formData" ref="form3" label-width="60px">
      <!-- el-form-item 每个表单的选项 -->

      <!--规则  { required: true, message: '账号必须输入', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '账号在3-10个字符'
          } -->
      <el-form-item
        label="账号"
        prop="uname"
        :rules="[
          {
            validator: (rule, value, callback) => {
              if (!value) return callback('账号必须填写');
              if (!/^\w{3,10}$/.test(value))
                return callback('账号在3-10个字符内');
            },
            trigger: 'blur'
          }
        ]">
        <el-input v-model="formData.uname" clearable=""></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input
          type="password"
          v-model="formData.pwd"
          clearable
          show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitFn">登录</el-button>
        <el-button @click="resetFn">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// fetch('请求地址', {
//   method: '',
//   headers: {},
//   body: { uname: this.uname, pwd: this.pwd }
//  body:this.formData
// });

export default {
  methods: {
    submit2Fn(formData) {
      console.log('收到子传递的数据:', formData);
    },
    submitFn() {
      //   alert('表单提交');
      //   this.$notify({
      //     title: '成功',
      //     message: '这是一条成功的提示消息',
      //     type: 'success'
      //   });
      this.$refs.form3.validate((isSuccess) => {
        if (isSuccess) {
          this.$notify({
            title: '成功',
            message: '验证通过,待写发送请求',
            type: 'success'
          });
        } else {
          //
        }
      });
    },
    resetFn() {
      //   this.formData = {
      //     uname: '',
      //     pwd: ''
      //   };
      this.$refs.form3.resetFields();
    }
  },
  data() {
    return {
      formData: {
        uname: '',
        pwd: ''
      },
      // 使用封装的组件

      formConfig: [
        {
          label: '账号',
          width: '',
          field: 'uname',
          type: 'text',
          rules: [
            {
              required: true,
              message: '账号不能为空',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在3-5个字符之间',
              tigger: 'blur'
            }
          ]
        },
        {
          label: '密码',
          width: '',
          field: 'pwd',
          type: 'text',
          rules: [
            {
              validator: (rule, value, callback) => {
                if (!value) return callback('请输入密码');
                return callback();
              },
              trigger: 'blur'
            }
          ]
        }
      ],
      formBtns: [
        {
          content: '登录',
          type: 'primary'
        },
        {
          content: '重置',
          type: ''
        }
      ]
    };
  }
};
</script>

<style></style>
